<template>
	<view class="content">
		<lxCalendar @change="change"></lxCalendar>
		<view class="bodys">
			<view class="grayData" v-for="(item, index) in this.DataList" :key="index">
				<view class="gray_left"></view>
				<view class="gray_right">
					<view class="gray_right_left">
						<view class="title">{{ item.coursename }}</view>
						<view class="gray_right_left_data">
							<image :src="url + item.teacherphoto" mode="" class="imaget"></image>
							<view class="gray_right_left_data_info">
								<view class="userName">{{ item.teachername }}</view>
								<view class="userBoloe">
									<text>{{ item.classrooms }}</text>
									<text style="margin-left:10rpx;">{{ item.endtime }}-{{ item.starttime }}</text>
								</view>
							</view>
						</view>
					</view>
					<view class="readio">
						<label class="radio">
							<radio value="" />
							<text></text>
						</label>
					</view>
				</view>
			</view>
			<view class="grayuserData" v-for="(item, index) in this.havenList" :key="index">
				<view class="gray_left"></view>
				<view class="gray_right">
					<view class="gray_right_left">
						<view class="title">{{ item.coursename }}</view>
						<view class="gray_right_left_data">
							<image :src="url + item.teacherphoto" mode="" class="imaget"></image>
							<view class="gray_right_left_data_info">
								<view class="userName">{{ item.teachername }}</view>
								<view class="userBoloe">
									<text>{{ item.classrooms }}</text>
									<text style="margin-left:10rpx;">{{ item.endtime }}-{{ item.starttime }}</text>
								</view>
							</view>
						</view>
					</view>
					<view class="readio"@click='rosjxk(item)'>
						<label class="radio">
							<radio value="" />
							<text></text>
						</label>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import lxCalendar from '../../components/lx-calendar/lx-calendar.vue';
import { Coursetablesearch } from '../../api/Courses/Courses.js';
import moment from 'moment';
import { url } from '@/utils/imageUrl.js';
export default {
	components: {
		lxCalendar
	},
	data() {
		return {
			title: 'Hello',
			DataTrim: '',
			DataList: [],
			havenList: [],
			url
		};
	},

	onLoad() {
		this.DataTrim = new Date();

		this.DataTrim = moment(this.DataTrim).format('YYYY-MM-DD');
		console.log(this.DataTrim);
		this.CoursesData();
	},
	methods: {
			
		rosjxk(data){
			console.log(data)
			let res = JSON.stringify(data)
			uni.navigateTo({
				url:`/pages/recess/recessadd?datas=${res}`
			})
		},
		
		async CoursesData() {
			const res = await Coursetablesearch({ psize: 20 });
			if (res.errCode == '10000') {
				res.data.list = res.data.list.map(
					item => {
						item.endtime = moment(item.endtime).format('HH:MM');
						item.starttime = moment(item.starttime).format('HH:MM');
						return item;
					}

					// item.starttime = moment(item.starttime).format('HH:MM');
				);

				// this.DataList = res.data.list.filter((item, index) => item.coursedate == this.DataTrim);
				this.havenList = res.data.list.filter(item => item.state == 0 && item.coursedate == this.DataTrim);
				this.DataList = res.data.list.filter(item => item.state == 1 && item.coursedate == this.DataTrim);
			}
		},
		change(e) {
			this.DataTrim = e.fulldate;
			this.CoursesData();
		}
	}
};
</script>
<style lang="less">
@import url('./Courses.less');
</style>
